<script>
// 页面内组件
import Home from '@/components/homeCon.vue'
import Portrait from '@/components/portraitCon.vue'
import people from '@/components/peopleCon.vue'
// import MessageBoard from '@/components/messageCon.vue' // 留言板
import talkCon from '@/components/talkCon.vue'
let id = 0
export default {
  data () {
    return {
      barItemText: [
        { id: id++, name: '首页', icon: 'icon-tuijian', componentName: 'Home' },
        {
          id: id++,
          name: '路线定制',
          icon: 'icon-luxian',
          componentName: 'Portrait'
        },
        {
          id: id++,
          name: '聊天室',
          icon: 'icon-Walkietalkie',
          componentName: 'talkCon'
        },
        {
          id: id++,
          name: '我的画像',
          icon: 'icon-sixin',
          componentName: 'people'
        }
        {
          id: id++,
          name: '留言板',
          icon: 'icon-liuyanban-05',
          componentName: 'MessageBoard'
        }
      ],
      flag: [true, false, false, false, false],
      componentName: 'Home',
      characterImg:
        'https://pic4.zhimg.com/50/v2-9361df6611d4ab9823156f3246336827_hd.jpg?source=1940ef5c',
      loginFlag: false,
      loginClick: false,
      loginDialogFlag: true,
      maskDisplay: true,
      isShow: true,
      register: { name: '', password: '' },
      login: { name: '', password: '' },
      okName: ''
    }
  },
  methods: {
    barClick (id) {
      if (!this.loginFlag) {
        this.loginClick = true
        return
      }
      const array = [false, false, false, false, false]
      array[id] = true
      this.flag = array
      this.componentName = this.barItemText[id].componentName
    },
    registerClick () {
      // 网络请求
      const _this = this
      _this
        .$http({
          method: 'post',
          url: '/user/register',
          data: this.register
        })
        .then(function (response) {
          if (response.status === 200) {
            _this.loginDialogFlag = true
            // localStorage.setItem('userName', response.data.userName)
            // localStorage.setItem('userId', response.data.userId)
          }
        })
        .catch(function (error) {
          console.log(error)
        })
    },
    loginClickm () {
      // 网络请求
      const _this = this
      _this
        .$http({
          method: 'post',
          url: '/user/login',
          data: this.login
        })
        .then(function (response) {
          if (response.status === 200) {
            _this.loginFlag = true
            _this.loginClick = false
            _this.okName = _this.login.name
            const userInfo = {
              userName: response.data.userName,
              userId: response.data.userId
            }
            localStorage.setItem('userInfo', JSON.stringfy(userInfo))
          }
        })
        .catch(function (error) {
          console.log(error)
        })
    }
  },
  mounted () {
  },
  components: {
    Home,
    Portrait,
    people,
    // MessageBoard,
    talkCon
  }
}
</script>
<template>
  <div class="layout">
    <div :class="{ maskin: maskDisplay }">
      <div class="bar">
        <div class="bar_left">
          <div id="brand">Traveler</div>
          <div
            class="bar_item"
            v-for="item in barItemText"
            :key="item.id"
            :class="{ bar_bottom: flag[item.id] }"
            @click="barClick(item.id)"
          >
            <span
              class="iconfont"
              :class="item.icon"
              style="font-size: 20px"
            ></span>
            {{ item.name }}
          </div>
        </div>
        <!-- 头像切换  loginFlag-->
        <div class="bar_right">
          <img
            v-if="loginFlag"
            :src="characterImg"
            alt="头像"
            class="character"
          />
          <!-- <div
            v-if="loginFlag"
            style="
              position: absolute;
              top: 70px;
              left: 340px;
              font-size: 20px;
              -moz-box-shadow: 2px 2px 5px #333333;
              -webkit-box-shadow: 2px 2px 5px #333333;
              box-shadow: 2px 2px 5px #333333;
              padding: 20px;
            "
            class="kkk"
          >
            <div
              class="iconfont icon-svg-1"
              style="margin-bottom: 20px; cursor: pointer"
            >
              {{login.name}}
            </div>
            <div class="iconfont icon-sixin3" style="cursor: pointer">
              我的消息
            </div>
          </div> -->
          <div v-else class="login" @click="loginClick = true">登录 / 注册</div>
        </div>
      </div>
      <!-- 内容切换 使用 componentName -->
      <div class="box">
        <!-- <component :is="componentName"></component> -->
        <Home v-if="componentName === 'Home'" :user-name="okName"></Home>
        <Portrait v-if="componentName === 'Portrait'"></Portrait>
        <people v-if="componentName === 'people'"></people>
        <!-- <MessageBoard v-if="componentName === 'MessageBoard'"></MessageBoard> -->
        <talkCon
          v-if="componentName === 'talkCon'"
          :user-name="okName"
        ></talkCon>
      </div>
      <!-- dialog出现不出现 loginClick  -->
      <div class="dialog" v-if="loginClick">
        <div class="logo">Traveler</div>
        <div v-if="loginDialogFlag" class="in">
          <div class="on">
            <input
              type="text"
              class="name"
              placeholder="输入用户名/邮箱"
              v-model="login.name"
            />
            <input
              type="password"
              class="password"
              placeholder="输入密码"
              v-model="login.password"
            />
          </div>
          <div class="down">
            <button @click="loginClickm">登录</button>
          </div>
          <div class="switch">
            <button class="left">找回密码</button>
            <button class="right" @click="loginDialogFlag = false">注册</button>
          </div>
        </div>
        <div v-else class="in">
          <div class="on">
            <input
              type="text"
              class="name"
              placeholder="输入用户名/邮箱"
              v-model="register.name"
            />
            <input
              type="password"
              class="password"
              placeholder="输入密码"
              v-model="register.password"
            />
          </div>
          <div class="down">
            <button @click="registerClick">注册</button>
          </div>
          <div class="switch">
            <button class="left">找回密码</button>
            <button class="right" @click="loginDialogFlag = true">登录</button>
          </div>
        </div>
      </div>
      <div
        class="mask"
        v-if="loginClick"
        style="
          position: fixed;
          left: 0px;
          top: 0px;
          right: 0px;
          bottom: 0px;
          background-color: black;
          opacity: 0.8;
          z-index: 11100;
        "
        @click="loginClick = false"
      ></div>
    </div>
    <Transition>
      <div class="maskon" v-show="maskDisplay">
        <div class="center">
          <span class="onFont">懂你所想，知你所需</span><br />
          <span class="downFont">探索一个新的自己</span>
        </div>
        <div
          class="iconfont down icon-tuiguangzhong"
          style="font-size: 50px; color: white; cursor: pointer"
          @click="maskDisplay = !maskDisplay"
        ></div>
      </div>
    </Transition>
  </div>
</template>
<style scoped lang="less">
.layout {
  position: relative;
  .bar {
    position: fixed;
    left: 0px;
    top: 0px;
    height: 80px;
    width: 100%;
    z-index: 100;
    box-sizing: border-box;
    padding-left: 30px;
    padding-right: 30px;
    border-bottom: 1px solid #0c1821;
    white-space: nowrap;
    background-color: #fff;
    .bar_left {
      display: inline-block;
      vertical-align: top;
      margin-top: 30px;

      #brand {
        font-family: hongkong;
        font-size: 22px;
        color: #0c1821;
        display: inline-block;
        cursor: pointer;
      }

      .bar_bottom {
        border-bottom: 2px solid #0c1821;
      }

      .bar_item {
        display: inline-block;
        margin-left: 20px;
        font-size: 20px;
        height: 25px;
        cursor: pointer;
      }
    }

    .bar_right {
      display: inline-block;
      width: 500px;
      box-sizing: border-box;
      margin-left: 40%;
      position: relative;
      margin-top: 10px;

      .character {
        width: 50px;
        height: 50px;
        display: inline-block;
        border-radius: 50%;
        position: absolute;
        top: 10px;
        left: 380px;
        cursor: pointer;
      }
      .kkk {
        display: none;
      }
      .character:hover + .kkk {
        display: block;
      }
      .login {
        width: 100px;
        height: 50px;
        font-size: 18px;
        display: inline-block;
        position: absolute;
        top: 22px;
        left: 350px;
        cursor: pointer;
        color: #ccc;
      }
    }
  }

  .box {
    box-sizing: border-box;
    background: linear-gradient(
      to bottom,
      rgb(255, 255, 255),
      rgb(195, 193, 193)
    );
  }

  .dialog {
    position: fixed;
    top: 30%;
    left: 35%;
    z-index: 11110;
    width: 500px;
    height: 350px;
    border-radius: 20px;
    padding: 20px;
    box-sizing: border-box;
    background-color: grey;
    span {
      float: right;
      cursor: pointer;
    }
    .logo {
      width: 80%;
      height: 18%;
      margin: 0 auto;
      text-align: center;
      font-family: hongkong;
      font-size: 40px;
      color: #0c1821;
      cursor: pointer;
    }
    .in {
      .on {
        height: 30%;
        input {
          width: 80%;
          margin: 0 auto;
          display: block;
          height: 50px;
          margin-top: 20px;
          border-radius: 20px;
          padding: 0 20px;
          box-sizing: border-box;
        }
      }
      .down {
        height: 40%;
        margin-top: 4%;
        button {
          display: block;
          margin: 0 auto;
          width: 80%;
          border-radius: 20px;
          background-color: #333;
          height: 50px;
          font-size: 25px;
          color: white;
        }
      }
      .switch {
        height: 10%;
        margin-top: 4%;
        button {
          border: none;
          background-color: gray;
          color: aliceblue;
        }
        .left {
          float: left;
        }
        .right {
          float: right;
        }
      }
    }
  }

  .maskon {
    position: fixed;
    left: 0px;
    right: 0px;
    bottom: 0px;
    top: 0px;
    background: url(@/assets/img/heiyexingkong.jpg) no-repeat;
    z-index: 10000000;
    .center {
      position: fixed;
      left: 33.8%;
      top: 30%;
      text-align: center;
      .onFont {
        font-size: 70px;
        font-family: cool;
        color: aliceblue;
      }
      .downFont {
        font-size: 30px;
        font-family: cool;
        color: aliceblue;
      }
    }
    .down {
      position: fixed;
      bottom: 0px;
      left: 48.6%;
    }
  }

  .v-enter-active {
    animation: slidein 0.5s linear;
  }
  .v-leave-active {
    animation: slidein 0.5s linear reverse;
  }
  @keyframes slidein {
    from {
      transform: translateY(-100%);
    }
    to {
      transform: translateY(0);
    }
  }
}
.maskin {
  display: none;
}
</style>
